<template>
  <div class="mt-1">
    <van-form>
      <h4 style="margin: 0 0 0.4rem 1rem; color: gray">
        当前产区:{{ this.$store.getters.productionLine }}
      </h4>
      <van-field
        readonly
        clickable
        :value="processOrder.PROCORDER"
        label="工单号"
        placeholder="请选择工单号"
        @click="processOrderVisible = true"
      />
      <van-popup
        v-model="processOrderVisible"
        position="bottom"
        style="height: 100%"
        class="bg-default"
      >
        <process-order @get-val="getProcessOrder" @back="back" />
      </van-popup>
      <van-field
        readonly
        clickable
        :value="packerid"
        label="包装机"
        placeholder="点击选择"
        @click="packerPicker = true"
      />
      <van-popup v-model="packerPicker" position="bottom">
        <van-picker
          show-toolbar
          value-key="F_ItemName"
          :columns="packercolumns"
          @confirm="packerPickerAdjustConfirm"
          @cancel="packerPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        :value="rollid"
        label="膜卷号"
        placeholder="点击选择"
        @click="rollPicker = true"
      />
      <van-popup v-model="rollPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="rollAdjustConfirm"
          @cancel="rollPicker = false"
        />
      </van-popup>
      <ag-grid-vue
        style="width: 100%; height: 60vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="multiple"
        :rowData="rowData"
      >
      </ag-grid-vue>
      <van-dialog
        v-model="visible"
        show-cancel-button
        :beforeClose="handleSure"
        confirm-button-color="rgba(25, 137, 250,1)"
      >
        <div class="ip-container">
          <van-field
            label="物料号"
            :value="this.rollDataA.ProductId"
            readonly
          />
          <van-field label="拍号" :value="this.rollDataA.UniqueId" readonly />
          <van-field
            label="膜卷号"
            :value="this.rollDataA.WindingNumber"
            readonly
          />
          <van-field
            label="生产日期"
            :value="this.rollDataA.CreatedOn"
            readonly
          />
          <van-field label="产线" :value="this.rollDataA.Line" readonly />
          <van-field
            label="投产数量"
            required
            clearable
            v-model="newNum"
            placeholder="请输入数量"
          />
        </div>
      </van-dialog>
      <audio src="../../assets/warning.mp3" preload="auto" id="bgMusic"></audio>
    </van-form>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import { Picker, Dialog } from "vant";
import { mapGetters } from "vuex";
import ProcessOrder from "../../components/ProcessOrder";
import { AgGrid } from "../../mixins/AgGrid";
import { toast } from "../../utils/common"; //parseQRCode,
import {
  commissionSubmit,
  GetWindNumber,
  SerachList,
  GetWindingPackerList,
} from "../../api/feeding";

export default {
  name: "WorkOrder",
  components: {
    AgGridVue,
    ProcessOrder,
    [Picker.name]: Picker,
    [Dialog.Component.name]: Dialog.Component,
  },
  mixins: [AgGrid],
  data() {
    return {
      labelWidth: "7em",
      rollid: "",
      packerid: "",
      orderNo: "",
      rollindex: null,
      newNum: null,
      oldNum: null,
      visible: false,
      rollPicker: false,
      packerPicker: false,
      processOrderVisible: false,
      columnDefs: [
        { headerName: "膜卷号", field: "WindingNumber", width: 90 },
        { headerName: "物料号", field: "ProductId", width: 110 },
        { headerName: "拍号", field: "UniqueId", width: 120 },
        {
          headerName: "数量",
          field: "Num",
          width: 70,
        },
      ],
      columns: [],
      packercolumns: [],
      rowData: [],
      NewData: [],
      ShowData: {},
      workMarterial: [],
      processOrder: {},
      rollData: [],
      rollDataA: {},
    };
  },
  computed: {
    ...mapGetters(["productionLine"]),
  },
  methods: {
    //播放警示音
    playMusic() {
      setTimeout(() => {
        let audio = document.getElementById("bgMusic");
        audio.play();
      }, 200);
    },
    //获取选中的工单号和物料号
    getProcessOrder(val) {
      //console.log(val);
      this.processOrder = val;
      this.processOrderVisible = false;
      this.rollData = [];
      this.columns = [];
      this.GetWindNumber();
    },
    back() {
      //返回
      this.processOrderVisible = false;
    },
    //从外界添加数据
    async findPat() {
      let productionline = this.$store.getters.productionLine;
      let user = this.$store.getters.user;
      let res = await commissionSubmit(
        productionline,
        this.rollDataA.UniqueId,
        this.rollDataA.ProductId,
        "6",
        user,
        "2",
        this.rollid,
        this.$store.getters.WarehouseId,
        this.processOrder.PROCORDER,
        "",
        this.newNum,
        "",
        this.packerid
      );
      console.log(res);
      if (res && res.Status == 200 && res.Data) {
        this.rowData.push({
          WindingNumber: res.Data.DeviceCode,
          ProductId: res.Data.ProductId,
          UniqueId: res.Data.UniqueId,
          Num: res.Data.Num,
        });
        console.log(res);
        toast(res.Msg);
      } else {
        this.playMusic();
        toast(res.Msg);
      }
    },
    //选择膜卷号
    rollAdjustConfirm(val, index) {
      this.rollid = val.match(/[\w\W]+(?=&)/g)[0];
      this.rollindex = index;
      this.rollPicker = false;
      console.log(this.rollData, index);
      this.rollDataA = this.rollData[index];
      this.getNumber();
      this.visible = true;
    },
    //选择包装机
    packerPickerAdjustConfirm(val) {
      /* if (this.rollid == "") {
        toast("请先选择膜卷号");
        this.packerPicker = false;
      } else { */
      console.log(val);
      this.packerid = val.F_ItemName;
      this.packerPicker = false;
      //this.visible = true;
      // }
    },
    //弹窗按钮
    handleSure(action, done) {
      if (action === "confirm") {
        console.log(this.newNum);
        console.log(this.oldNum);
        if (parseFloat(this.newNum) <= parseFloat(this.oldNum)) {
          console.log(this.newNum);
          this.findPat();
          done();
        } else {
          this.playMusic();
          toast("已超出库存");
          this.newNum = "";
          done(false);
        }
      } else {
        done();
      }
    },
    //获取卷心号
    async GetWindNumber() {
      //this.$store.getters.user
      let res = await GetWindNumber(
        this.$store.getters.productionLine,
        "",
        "",
        this.processOrder.MATERIAL,
        this.processOrder.PROCORDER
      );
      if (res.Data.length === 0) {
        console.log("1111");
        toast("库存明细内暂无膜卷号可投料");
      }
      if (res.Status == 200 && res.Data != null) {
        let _this = this;
        this.rollData = JSON.parse(JSON.stringify(res.Data));
        console.log(this.rollData);
        res.Data.map((it) => {
          _this.columns.push(`${it.WindingNumber}&${it.UniqueId}`);
        });
      } else {
        toast(res.Msg);
      }
      console.log(res);
    },
    //获取膜卷号
    async getNumber() {
      let res = await SerachList(
        this.$store.getters.productionLine,
        this.rollDataA.UniqueId,
        this.$store.getters.WarehouseId
      );
      if (res.Status == 200 && res.Data != "") {
        this.oldNum = res.Data.StockQuantity;
        this.newNum = "";
      } else {
        toast("此物料以及膜卷对应的拍码不在库存");
      }
      console.log(res);
    },
    //获取包装机的数据
    async GetWindingPackerList() {
      let res = await GetWindingPackerList(this.$store.getters.productionLine);
      console.log(res);
      if (res.Status == 200 && res.Data.length > 0) {
        this.packercolumns = JSON.parse(JSON.stringify(res.Data));
      } else {
        toast(res.Msg);
      }
    },
  },
  mounted() {
    this.GetWindingPackerList();
  },
};
</script>
<style>
</style>
